<template>
	<view class="mainPage">
		<!-- 自定义顶部背景颜色 -->
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">垂钓</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>
		<fishCatch ref="childFish" :ticketInfo="ticketInfo" :isStar="isStar"  :ticketId="id" @startTicket="handleStartTicket" @stopTicket="handleStopTicket" @updataInfo="updataInfo"></fishCatch>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import { getTicketInfo,startTicket,stopTicket } from '@/api/api.js';
	import fishCatch from '@/components/fishCatch/index.vue'
	// import Verify from '@/components/verify/verify.vue';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			
			fishCatch
		},

		data() {
			return {
				sysHeight: sysHeight,
				id:null,//当前鱼票ID
				errorNetwork: false,
				// pitchOn:'',//选中的鱼票
				ticketInfo:{
					storeName:'--',
					countDown:null,
					duration:null,
					avatar:'',
					pitchOn:'',
					seat:'',
					sku:'',
					showConversionBtn:false,
					startTime:'',
					endTime:'',
					collect_weight:'',
					collect_quantity:'',
					integral:'',
					is_delayed:null,
				},
				// autoStart:false,
				isStar:6,//按钮状态 //1:开始垂钓 2：结束垂钓 3：摇号 4：选号 5：待回鱼 6:选择鱼票
				timer:null,//定时器
				interval:5000,//定时器间隔时间
			}
		},
		onShow() {
			let that = this
			let ticket_id = uni.getStorageSync('updateSelectId')
			that.id = Number(ticket_id)
			
			//鱼票列表页面跳转过来，触发自定义事件
			/* uni.$once('selectTicket',function(data){
				debugger
				console.log(data);
				// TODO 下面执行刷新的方法
				let {id,fishNM} = data
				that.id = Number(id)
				// that.pitchOn = fishNM
			}) */
			//选位页面跳转过来，触发自定义事件
			/* uni.$once('updateSelect',function(obj){
				console.log(obj);
				//将选位完的鱼票id给到垂钓页面
				that.id =  Number(obj.id)
				// TODO 下面执行刷新的方法
			}) */
			this.getTicketInfoData()
		},
		onHide() {
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			this.getTicketInfoData()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onUnload() {
			// this.$refs.childFish.socketClose();
		},
		methods: {
			//倒计时结束，更新钓票信息 status true:开始垂钓  false:结束垂钓
			updataInfo(){
				// clearInterval(this.timer)
				// if(this.isStar==2){
				// 	setTimeout(()=>{
				// 		this.getTicketInfoData()
				// 	},2000)
				// }
			},
			//开始垂钓
			handleStartTicket(){
				let id = this.id
				let interval = this.interval
				startTicket(id).then(res=>{
					// this.ticketInfo.countDown = this.ticketInfo.duration
					this.getTicketInfoData()
					uni.$u.toast('已开始垂钓')
					/* this.timer = setInterval(()=>{
						this.getTicketInfoData()
					},interval) */
				})
			},
			//结束垂钓
			handleStopTicket(){
				let id = this.id
				stopTicket(id).then(res=>{
					uni.$u.toast('已结束垂钓')
					clearTimeout(this.timer)
					this.getTicketInfoData()
				})
			},
			//获取钓票信息
			getTicketInfoData(){
				let id = this.id
				if(!id)return
				console.log(id);
				getTicketInfo(id).then(res=>{
					let {time_rule,partition_name,seat_name,planned_start_time,planned_end_time,settled_fish_weight,settled_fish_count,order_status,seat_mode,is_delayed,image,mer_name,store_name,ret_money,time_remaining,ret_weight_total,ret_quantity_total} = res.data
					this.ticketInfo.avatar = image
					this.ticketInfo.storeName = mer_name
					this.ticketInfo.pitchOn = store_name
					this.ticketInfo.seat = partition_name + seat_name
					this.ticketInfo.sku = time_rule.sku
					this.ticketInfo.startTime = planned_start_time === null?'':planned_start_time
					this.ticketInfo.endTime = planned_end_time === null?'':planned_end_time
					this.ticketInfo.collect_weight = ret_weight_total
					this.ticketInfo.collect_quantity = ret_quantity_total
					this.ticketInfo.integral = ret_money
					this.ticketInfo.is_delayed = is_delayed
					this.ticketInfo.duration= time_rule.duration *1000
					this.ticketInfo.countDown = time_remaining *1000
					//底部按钮状态
					switch (order_status){
						case 10:
							//还未选位
							//手动选位
							if(seat_mode === 0)this.isStar = 4
							//摇号选位
							if(seat_mode === 1)this.isStar = 3
							break;
						case 21:
							//已选完，可以开始垂钓
							this.isStar = 1
							break;
						case 41:
							//启动垂钓中
							this.isStar = 2
							break;
						case 51:
							//已结束垂钓，待回鱼
							this.isStar = 5
							break;
						default:
							break;
					}
					clearInterval(this.timer)
					if(order_status == 21 ||order_status == 41 || order_status == 51){
						// 如果是绑定钓位成功、启动垂钓成功、待回鱼状态，则间隔一段时间向服务器请求最新数据
						let interval = this.interval
						this.timer = setInterval(()=>{
							this.getTicketInfoData()
						},interval)
					}else if(order_status == 70){
						//如果订单结束，则情况当前页面数据，状态为选票
						uni.removeStorageSync("updateSelectId");
						this.reset()
					}
				})
			},
			//重置
			reset(){
				this.ticketInfo = {
					storeName:'--',
					countDown:null,
					duration:null,
					avatar:'',
					pitchOn:'',
					seat:'',
					sku:'',
					showConversionBtn:false,
					startTime:'',
					endTime:'',
					collect_weight:'',
					collect_quantity:'',
					integral:'',
					is_delayed:null,
				}
				this.isStar = 6
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainPage{
		background-color: #fff;
		.top{
			.sys-head {
			  .bg {
			    background-color: #549CE3;
			  }
			  .sys-title {
			    font-size: 32rpx;
			  }
			}
		}
	}
	// .head {
	// 	position: relative;

	// 	.introduction {
	// 		position: absolute;
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: flex-start;
	// 		top: 65rpx;
	// 		width: 690rpx;
	// 		left: 30rpx;

	// 		.introduction-left {
	// 			width: 170rpx;
	// 			height: 170rpx;
	// 			border-radius: 170rpx;
	// 			border: 4rpx solid #99796c;

	// 		}

	// 		.introduction-right-box {
	// 			display: flex;
	// 			flex-direction: row;
	// 			justify-content: space-between;
	// 			margin-left: 40rpx;
	// 			width: 480rpx;

	// 			.intro-box {
	// 				padding-top: 40rpx;

	// 				.intro-item {
	// 					display: flex;
	// 					flex-direction: row;
	// 					justify-content: flex-start;

	// 					.name {
	// 						font-size: 24rpx;
	// 						color: #fff;
	// 						margin-left: 20rpx;
	// 						line-height: 40rpx;
	// 					}
	// 				}

	// 				.intro-item:nth-child(1) {
	// 					margin-bottom: 20rpx;
	// 				}
	// 			}

	// 			.delayed {
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: center;
	// 				justify-content: center;

	// 				.delayed-btn {
	// 					background-color: #66adf0;
	// 					color: #fff;
	// 					font-size: 24rpx;
	// 					padding: 8rpx 14rpx;
	// 					border-radius: 24rpx;
	// 				}
	// 			}

	// 		}
	// 	}
	// }

	// .real {
	// 	padding-left: 30rpx;
	// 	padding-right: 30rpx;
	// 	margin-top: 40rpx;

	// 	.Choose {
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: flex-start;
	// 		font-size: 24rpx;

	// 		.Choose-text {
	// 			line-height: 40rpx;
	// 		}

	// 		.Choose-btn {
	// 			background-color: #ffc53e;
	// 			color: #fff;
	// 			padding: 4rpx 14rpx;
	// 			border-radius: 20rpx;
	// 			margin-left: 10rpx;
	// 		}
	// 	}
	// }

	// .sure-btn {
	// 	font-size: 24rpx;
	// 	width: 690rpx;
	// 	margin-left: 30rpx;
	// 	background-color: #ffc53e;
	// 	color: #fff;
	// 	text-align: center;
	// 	line-height: 70rpx;
	// 	margin-top: 200rpx;
	// 	border-radius: 10rpx;
	// }
	// .timeList{
	// 	padding: 40rpx;
	// 	width: 600rpx;
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: flex-start;
	// 	flex-wrap: wrap;
		
	// 	.timeLi{
	// 		width: 140rpx;
	// 		line-height: 60rpx;
	// 		margin-right: 20rpx;
	// 		text-align: center;
	// 		border: 2rpx solid #eee;
	// 		margin-bottom: 20rpx;
	// 		border-radius: 10rpx;
	// 	}
	// 	.activeTime{
	// 		background-color: #ffc53e;
	// 		color: #fff;
	// 	}
	// }
</style>
<style>
	page{
		background-color: #ffffff;
	}
</style>